<template>
  <div class="exec-excel-example">
    <h2>ExecExcel 组件使用示例</h2>
    
    <div class="example-section">
      <h3>1. 默认模式（只显示有数据的列）</h3>
      <p>默认情况下，组件会自动过滤掉没有数据的列，只显示包含有效数据的列。</p>
      <ExecExcel @upload-success="handleUploadSuccess" @file-selected="handleFileSelected" />
    </div>

    <div class="example-section">
      <h3>2. 显示所有列模式</h3>
      <p>通过设置 <code>show-only-data-columns="false"</code> 可以显示所有列，包括空列。</p>
      <ExecExcel 
        :show-only-data-columns="false"
        @upload-success="handleUploadSuccess" 
        @file-selected="handleFileSelected" 
      />
    </div>

    <div class="example-section">
      <h3>3. 动态控制列过滤</h3>
      <p>可以通过响应式数据动态控制是否启用列过滤。</p>
      <div class="control-panel">
        <a-switch 
          v-model:checked="enableColumnFilter" 
          checked-children="启用列过滤" 
          un-checked-children="显示所有列"
        />
        <span class="control-label">当前模式：{{ enableColumnFilter ? '只显示有数据的列' : '显示所有列' }}</span>
      </div>
      <ExecExcel 
        :show-only-data-columns="enableColumnFilter"
        @upload-success="handleUploadSuccess" 
        @file-selected="handleFileSelected" 
      />
    </div>

    <div class="example-section">
      <h3>4. 在表单中使用</h3>
      <p>组件可以在表单中正常使用，支持表单验证。</p>
      <a-form :model="formState" layout="vertical">
        <a-form-item label="Excel文件" name="excelFile" :rules="[{ required: true, message: '请选择Excel文件' }]">
          <ExecExcel 
            :show-only-data-columns="true"
            @upload-success="handleUploadSuccess" 
            @file-selected="handleFileSelected" 
          />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="handleSubmit">提交</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { message } from 'ant-design-vue';
import ExecExcel from './ExecExcel.vue';

// 响应式数据
const enableColumnFilter = ref(true);

// 表单状态
const formState = reactive({
  excelFile: null as File | null
});

// 事件处理
const handleUploadSuccess = (data: any) => {
  console.log('文件上传成功:', data);
  message.success('文件处理完成！');
};

const handleFileSelected = (file: File) => {

  console.log('文件已选择:', file.name);
  formState.excelFile = file;
};

const handleSubmit = () => {
  if (!formState.excelFile) {
    message.error('请先选择Excel文件');
    return;
  }
  message.success('表单提交成功！');
};
</script>

<style scoped>
.exec-excel-example {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

.example-section {
  margin-bottom: 32px;
  padding: 20px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  background-color: #fafafa;
}

.example-section h3 {
  margin-top: 0;
  color: #1890ff;
  font-size: 16px;
}

.example-section p {
  margin: 8px 0;
  color: #666;
  font-size: 14px;
}

.example-section code {
  background-color: #f5f5f5;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: #d63384;
}

.control-panel {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px;
  background-color: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
}

.control-label {
  font-size: 14px;
  color: #666;
}
</style>
